<template>
  <div class="box">
    <div class="innerBox">
      <div class="front">
        <div class="top">
          <img src="../../assets/images/购买小技巧.png" width="300px" height="100px"/>
        </div>
        <el-divider border-style="double"></el-divider>
        <div class="bottom">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首先，看店内商品是否有平铺图，平铺图是否完整。虽然有些平铺图版型不咋，但绝大部分没有平铺图的版型都毕竟差，毕竟如果版型好的话肯定会主动放出来(排除少部分老店，比如说小嫏嬛馆，她家版型过关但是不放，兰若庭家版型很一般，但是是性价比比较高的大店)。<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其次，看模特图是否遮遮掩掩。有很多模特图为了避免消费者看出衣服问题会故意遮掩，比如说为了看不出飞袖而把手扬起来，为了避免看出下摆不齐故意用手遮掩，模特图全程就一两个姿势，没有全方位显示上身效果，有这种情况就要慎重考虑。<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;再次，看衣服的布料材质。有些店高价卖一些廉价的化纤布料，或者故意取一个看似高端的名字混淆视听，比如说把闪光缎叫做高级流光缎，这些需要注意。化纤布料不能一棒子打死，有些做得还是挺好的，但相应价格也偏高，要注意的是店家把廉价化纤卖出高价收割韭菜，比如说一些蚊帐布，粗化纤雪纺。这一块如果不懂的话可以翻翻评价和返图，或者自己多了解一些布料材质。<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;然后，看衣服的做工，比如说走线，绣花，腋下，下摆的处理等等。有些走线差的能一眼看出，比如说歪歪扭扭像蛇皮，或者针距、孔洞过大等。绣花要看是否稀疏，颜色的过渡处理是否生硬，绣花部位是否凹凸不平，绣线的光泽度等等，可以参照一下朱碧家的绣花，她家绣花在机绣里做得很好。像腋下，下摆这些位置也很容易做不好，可以看看是否波浪。<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此外，也要参考店铺的年限，新店风险大，要慎重下手，老店相对而言买的人多，可以参考的多。<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最后，可以参考一下汉服博主里的投稿，很多避雷大家都会发出，可以去微博关注一下汉服拔草机，说给汉服，汉服日常快落泉，说给藕霸汉服等等，这几个大家交流比较多，可以去上面投稿提问。<br>
        </div>
      </div>
      <div class="all">
        <div class="top">
          <img src="../../assets/images/店铺推荐.png" width="250px" height="100px"/>
        </div>
        <el-divider border-style="double"></el-divider>
        <h3 style="color: red">汉服不是生活必需品，切记多看少买提高审美。下面是整理的一些店铺：</h3>
        <div class="bottom">
          <div class="inner" v-for="item in shopData" :key="item.hanfuShopId">
            <h1>●&nbsp;&nbsp;{{ item.hanfuShopName }}</h1><br>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.hanfuShopDescribe }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-backtop style="--el-backtop-hover-bg-color: rgb(245,108,108);--el-backtop-text-color: red" :right="100" :bottom="100" />
  </div>
</template>

<script setup>
import {userApi} from "../../api/app";
import {onMounted, ref} from "vue";

const shopData = ref();

onMounted(() => {
  getData();
})

const getData = () => {
  userApi.getAllShop().then(response => {
    shopData.value = response;
  })
}
</script>

<style scoped>
.box {
  padding: 0 200px;
}
.innerBox {
  background-color: #FFFFFF;
  padding: 20px;
}
.front {
  padding-top: 20px;
}
.top {
  display: flex;
  justify-content: center;
}
.bottom {
  padding: 20px;
}
.all {
  margin-top: 40px;
}
.inner {
  margin-bottom: 30px;
}
</style>